<template>
  <q-toolbar class="bg-toolbar">
    <slot name="left">
      <q-btn flat class="absolute" @click="clickHandler">
        <img :src="imgObj"/>
      </q-btn>
    </slot>
    <q-toolbar-title>
      <div class="text-center text-bold mg-title">
        {{ title }}
      </div>
    </q-toolbar-title>
    <div class="absolute right-14">
      <slot name="right" />
      <template v-if="showAccount">
        <template v-if="!!userName">
          欢迎 <span class="font-13 text-yellow">{{ userName }}, </span>
          <a href="#" class="font-13 user-opt q-ml-sm" @click="logout">退出</a>
        </template>
        <!--<span v-else class="font-13 user-opt q-ml-sm">未登录</span>-->
      </template>
    </div>
  </q-toolbar>
</template>

<script>
import { mapState } from 'vuex'
import { QToolbar, QBtn, QToolbarTitle, Cookies } from 'quasar'
const defaultImg = require('../../img/realtechLogo.png')
export default {
  name: 'MgToolbar',
  components: {
    QToolbar, QBtn, QToolbarTitle
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showAccount: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState(['organization']),
    userName () {
      return Cookies.has(this.loginName) ? Cookies.get(this.loginName) : ''
    }
  },
  data () {
    return {
      imgObj: defaultImg,
      loginName: 'login_name',
      logoutValidFields: ['login_name', 'login_uuid']
    }
  },
  created () {
    this.getLogo()
  },
  methods: {
    getLogo () {
      let config
      if (process.env.COMPILE_MODE === 'lib') {
        config = { scopeName: process.env.APP_SCOPE_NAME }
      }

      // app左上角logo
      this.$logo(function (res) {
        const flag = res.code === 'success' && res.data
        this.imgObj = flag ? res.data : defaultImg
      }.bind(this), null, config)

      // 浏览器标签logo
      this.$logo_title(function (res) {
        const flag = res.code === 'success' && res.data
        if (!flag) return

        let link = document.querySelector('link[rel*="icon"]') || document.createElement('link')
        link.type = 'image/x-icon'
        link.rel = 'icon'
        link.href = res.data
      }, null, config)
    },
    clickHandler () {
      this.$emit('left-click')
    },
    logout () {
      const path = this.organization ? `/${this.organization}` : '/'
      this.logoutValidFields.forEach(field => {
        if (Cookies.has(field)) {
          Cookies.set(field, '', { expires: -1 })
          // 工厂分流场景, 删除后端设置的cookie
          path && Cookies.set(field, '', { expires: -1, path: path })
        }
      })

      // 应用场景：后端没有提供退出接口时，主动刷新当前页以触发后端的登录拦截功能
      this.$router.go(0)

      this.$emit('logout')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .bg-toolbar
    background-color: #1D273A!important
    height 50px
    .mg-title
      font-size 30px
    .right-14
      right 14px
    .font-13
      font-size 13px
    .user-opt
      color #D8D8D8
      text-decoration none
    .user-opt:hover
      text-decoration underline
</style>
